<template>
  <div>
    <div class="boxClass">
      <h1 class="titleClass">申请人情况:</h1>
      <el-form :inline="true" label-width="90px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="抵押人:">
              <el-input v-model="form.mortgagor" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号:">
              <el-input v-model="form.mortgagorCard" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码:">
              <el-input v-model="form.mortgagorTel" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="">
              <el-radio-group v-model="form.choiceMortgagor">
                <el-radio :label="1" v-if="Witch">同抵押人</el-radio>
                <el-radio :label="0" v-if="componentWwitch"
                  >不同抵押人</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="componentWwitch">
            <el-form-item label="债务人:">
              <el-input v-model="form.debtor" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="componentWwitch">
            <el-form-item label="身份证号:">
              <el-input v-model="form.debtorCard" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="componentWwitch">
            <el-form-item label="手机号码:">
              <el-input v-model="form.debtorTel" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <h1 class="indexClass">
              主债权合同/抵押合同编号 : 不动产（新华普惠·重庆银行）反担保
              <input type="text" class="inputClass1" v-model="word" />字
              第<input type="text" class="inputClass1" v-model="number" />号
            </h1>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="boxClass">
      <h1 class="titleClass">不动产情况:</h1>
      <el-form :inline="true" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="房屋坐落:">
              <el-input type="textarea" v-model="form.site" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不动产权证号:">
              <el-input type="textarea" v-model="form.cnm" class="inputEl"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="不动产单元号:">
              <el-input
                type="textarea"
                v-model="form.unit"
                class="inputEl"
                placeholder="请输入不动产单元号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建筑面积:">
              <input type="text" class="inputClass1 inputClass2" v-model="form.area" />㎡
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="抵押物清单:">
              <el-radio-group v-model="form.collateralList">
                <el-radio :label="1">需要</el-radio>
                <el-radio :label="0">不需要</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="indexBox">
      <el-button type="primary" @click="downloadForm">下载</el-button>
    </div>
  </div>
</template>
<script>
import {
  mortgageRYD,
  mortgageLYB,
  mortgageLYF,
  mortgageDBAJF,
  getOrderTable,
} from "../../assets/js/api";
export default {
  props: ["isContract", "orderData"],
  data() {
    return {
      form: {
        area: "", //建筑面积!
        unit: "", //不动产单元号!
        cnm: "", //不动产证号!
        mortgagorTel: "", //抵押人手机号码!
        mortgagorCard: "", //抵押人身份证号码!
        mortgagor: "", //抵押人!
        site: "", //房屋坐落位置!
        debtorTel: "", //债务人手机号!
        debtorCard: "", //债务人身份证号码!
        debtor: "", //债务人姓名!
        choiceMortgagor: 1, //同抵押人或者不同抵押人状态码选择!
        collateralList: 1, //抵押物清单!
      },

      // area: "",
      word: "",
      number: "",
      componentWwitch: true,
      Witch: null,
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 获取订单信息详情!
    getUserInfo() {
      getOrderTable(this.orderData).then((res) => {
        this.form.site = res.data.pledgeHouseAddress; //房屋坐落!
        this.form.cnm = res.data.pledgeHouseNumber; //产权证号!
        this.form.area = res.data.pledgeHouseArea; //建筑面积!
        this.form.unit = res.data.estateUnit; //不动产单元号!
        this.form.debtorCard = res.data.basicBorrowerCard; //债务人身份证号码!
        this.form.debtorTel = res.data.basicBorrowerPhone; //债务人手机号码!
        this.form.debtor = res.data.basicBorrowerName; //债务人!
        if (res.data.pledgeMateName && res.data.pledgeName) {
          this.form.mortgagor = `${res.data.pledgeName}、${res.data.pledgeMateName}`;
          this.form.mortgagorCard = `${res.data.pledgeCard}、${res.data.pledgeMateCard}`;
          if (res.data.pledgePhone && res.data.pledgeMatePhone) {
            this.form.mortgagorTel = `${res.data.pledgePhone}、${res.data.pledgeMatePhone}`;
          } else if (res.data.pledgePhone) {
            this.form.mortgagorTel = res.data.pledgePhone;
          } else {
            this.form.mortgagorTel = res.data.pledgeMatePhone;
          }
        } else {
          this.form.mortgagorCard = res.data.pledgeCard; //抵押人身份证号!
          this.form.mortgagor = res.data.pledgeName; //抵押人!
          this.form.mortgagorTel = res.data.pledgePhone; //抵押人手机号码!
        }
        if (this.form.mortgagor == this.form.debtor) {
          this.componentWwitch = false;
          this.Witch = true;
          this.form.choiceMortgagor = 1;
        } else {
          this.componentWwitch = true;
          this.Witch = false;
          this.form.choiceMortgagor = 0;
        }
        //拼接第二套
        if(res.data.pledgeHouseAddressTwo){
          this.form.site=this.form.site+'、'+res.data.pledgeHouseAddressTwo
        }
        if(res.data.pledgeHouseNumberTwo){
          this.form.cnm=this.form.cnm+'、'+res.data.pledgeHouseNumberTwo
        }
        if(res.data.pledgeHouseAreaTwo){
          this.form.area=this.form.area+'、'+res.data.pledgeHouseAreaTwo
        }
        if(res.data.estateUnitTwo){
          this.form.unit=this.form.unit+'、'+res.data.estateUnitTwo
        }
      });
    },
    // 下载按钮!
    downloadForm() {
      if (
        this.isContract == 1 ||
        this.isContract == 3 ||
        this.isContract == 4
      ) {
        this.form.contractNumber = `不动产（新华普惠·重庆银行）${this.word}字${this.number}号/不动产（新华普惠·重庆银行)反担保${this.word}字第${this.number}号`;
        // this.form.area = `${this.area}㎡`;
        if (this.isContract == 1) {
          mortgageLYB(this.form).then((res) => {
            // window.open(res);
            window.location = res;
          });
        }
        if (this.isContract == 3) {
          mortgageLYF(this.form).then((res) => {
            // window.open(res);
            window.location = res;
          });
        }
        if (this.isContract == 4) {
          mortgageDBAJF(this.form).then((res) => {
            // window.open(res);
            window.location = res;
          });
        }
      }
      if (this.isContract == 2) {
        this.form.contractNumber = `不动产（新华普惠·永川北银）${this.word}字${this.number}号/不动产反担保（新华普惠·永川北银）${this.word}字第${this.number}号`;
        // this.form.area = `${this.area}㎡`;
        mortgageRYD(this.form).then((res) => {
          // window.open(res);
          window.location = res;
        });
      }

    },
  },
};
</script>
<style lang="less" scoped>
.boxClass {
  margin-bottom: 20px;
  width: 100%;
  border: 2px solid #ccc;
}
.indexClass {
  margin-left: 20px;
  margin-bottom: 20px;
}
.inputClass1 {
  border-radius: 4px;
  height: 35px;
  line-height: 35px;
  width: 60px;
  color: #606266;
  border: 1px solid #dcdfe6;
  text-align: center;
}
.inputClass2 {

  width: 120px;
}

.titleClass {
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: bold;
}
.indexBox {
  text-align: center;
}
/deep/ .inputEl {
  width: 165%;
}
</style>